<template>
    <div class="list">
        <div class="list-img">
            <img src="http://wddxwdc.tffcs.com/image/dxkfr/whxd/banner.png" alt="">
        </div>
        <div class="content">
            <div class="tit-img"><img src="../assets/xdtj.png" alt=""></div>
            <div class="list-box">
                <div class="list-box-item" v-for="item in items" :key="item.name "@click="btnClick(item.id)">
                    <div class="list-box-item-top"><img :src="item.url[0]" alt=""></div>
                    <div class="list-box-item-bottom">
                        <p class="title">{{ item.name }}</p>
                        <p class="remark">{{ item.remark }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue';
import data from '../data'
import { useRouter } from 'vue-router';
const router=useRouter()


const items=ref(data)
const btnClick =(id) =>{
    console.log('btnClick');
    router.push({path: '/whxdListDetail',query:{id} })
}
</script>
<style scoped lang="scss">
.list{
    background-color: #fff;

    p{
        margin: 0;
    }

    .list-img{
        img{
            width: 100%;
        }

        >span{
            color: royalblue;
        }
    }
    .content{
        padding: 0 14px;

        .tit-img{
            display: flex;
            justify-content: center;

            img{
                width: 60%;
            }
        }
        .list-box{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;

            .list-box-item{
                width: 48%;
                display: flex;
                flex-direction: column;
                margin-top: 6px;
                border: 0.5px solid rgb(0, 0, 0,1);
                border-radius: 8px;

                .list-box-item-top{
                    img{
                        width: 168px;
                        height: 158px;
                    }
                }
                .list-box-item-bottom{
                    margin: 4px 4px 12px 4px;

                    .title{
                        font-size: 14px;
                        font-weight: bold;
                    }
                    .remark{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    p{
                        font-size: 12px;
                        color: #555;
                    }
                }
            }

            .list-box-item:nth-child(even){
                margin-left: 10px;
                margin-top: 30px;
            }
        }
    }
}

</style>